<template>
  <div class="empedit">
    <el-scrollbar height="400px">
      <el-form
        ref="empForm"
        class="empForm"
        :model="pageData.formData"
        :rules="pageData.formRules"
        status-icon
        label-width="100px"
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="编号：" prop="fcode">
              <el-input
                v-model="pageData.formData.fcode"
                placeholder="请输入编号"
                :disabled="!pageData.isAdd"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名：" prop="fname">
              <el-input
                v-model="pageData.formData.fname"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别：" prop="fsex">
              <el-select
                v-model="pageData.formData.fsex"
                placeholder="请选择性别"
                style="width: 100%"
              >
                <el-option
                  v-for="item in pageData.sexEnumArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期：" prop="fbirthday">
              <el-date-picker
                v-model="pageData.formData.fbirthday"
                type="date"
                style="width: 100%"
                placeholder="选择日期"
                :editable="false"
                @change="onHandleBirthday"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号：" prop="fidcardno">
              <el-input
                v-model="pageData.formData.fidcardno"
                placeholder="请输入身份证号"
                :maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务：" prop="fduty">
              <el-input
                v-model="pageData.formData.fduty"
                placeholder="请输入职务"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位：" prop="ftitle">
              <el-input
                v-model="pageData.formData.ftitle"
                placeholder="请输入职位"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职级：" prop="fdutylevel">
              <el-input
                v-model="pageData.formData.fdutylevel"
                placeholder="请输入职级"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮政编码：" prop="fpostcode">
              <el-input
                v-model="pageData.formData.fpostcode"
                placeholder="请输入邮政编码"
                :maxlength="10"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址：" prop="faddress">
              <el-input
                v-model="pageData.formData.faddress"
                placeholder="请输入地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话：" prop="ftel">
              <el-input
                v-model="pageData.formData.ftel"
                placeholder="请输入电话"
                :maxlength="11"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号：" prop="fmobile">
              <el-input
                v-model="pageData.formData.fmobile"
                placeholder="请输入手机号"
                :maxlength="11"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮件：" prop="femail">
              <el-input
                v-model="pageData.formData.femail"
                placeholder="请输入邮件"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传真：" prop="ffax">
              <el-input
                v-model="pageData.formData.ffax"
                placeholder="请输入传真"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急联络人：" prop="flinkman">
              <el-input
                v-model="pageData.formData.flinkman"
                placeholder="请输入紧急联络人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联络人电话：" prop="flinkmantel">
              <el-input
                v-model="pageData.formData.flinkmantel"
                placeholder="请输入联络人电话"
                :maxlength="11"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职日期：" prop="fjoindate">
              <el-date-picker
                v-model="pageData.formData.fjoindate"
                type="date"
                style="width: 100%"
                placeholder="选择日期"
                :editable="false"
                @change="onHandleJoindate"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离职日期：" prop="fdimissiondate">
              <el-date-picker
                v-model="pageData.formData.fdimissiondate"
                type="date"
                style="width: 100%"
                placeholder="选择日期"
                :editable="false"
                @change="onHandleDimissiondate"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="系统用户：" prop="fissysuser">
              <el-switch
                v-model="pageData.formData.fissysuser"
                :active-value="1"
                :inactive-value="0"
                active-text="否"
                inactive-text="是"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态：" prop="state">
              <el-select
                v-model="pageData.formData.state"
                placeholder="请选择状态"
                style="width: 100%"
              >
                <el-option
                  v-for="item in pageData.stateEnumArr.filter((p) => p.value > -1)"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：" prop="fremark">
              <el-input
                v-model="pageData.formData.fremark"
                placeholder="请输入备注"
                type="textarea"
                :rows="2"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-button @click="onHandleCancel">取 消</el-button>
        <el-button
          :v-if="
            (pageData.isAdd && pageData.permissions.Add) ||
            (!pageData.isAdd && pageData.permissions.Edit)
          "
          type="primary"
          @click="onHandleSure"
          >确 定</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElLoading, ElMessage } from "element-plus";
import utils from "@/common/utils";
import enums from "@/common/enums";
const lodash = require("lodash");

import { createEmp, updateEmp } from "@/api/system";

export default {
  name: "EmpEdit",
  components: {},
  props: {
    modifyObj: { type: Object, required: true },
    currentOrg: { type: Object, required: true },
    isAdd: { type: Boolean, required: true, default: false },
  },
  setup(props, context) {
    onMounted(() => {
      if (props.isAdd) {
        pageState.pageData.formData = {
          fempid: "",
          forgid: props.currentOrg.forgid,
          forgname: props.currentOrg.fname,
          // forgid: props.currentOrg.fmentorgid,
          // forgname: "",
          // fdeptid: props.currentOrg.forgid,
          // fdeptname: props.currentOrg.fname,
          fcode: "",
          fname: "",
          fsex: -1,
          fbirthday: "",
          fidcardno: "",
          fduty: "",
          ftitle: "",
          fdutylevel: "",
          fpostcode: "",
          faddress: "",
          ftel: "",
          fmobile: "",
          femail: "",
          ffax: "",
          flinkman: "",
          flinkmantel: "",
          fjoindate: utils.parseTime(new Date()),
          fdimissiondate: "",
          fremark: "",
          fissysuser: 0,
          state: enums.StateEnum.Enable.value,
        };
      } else pageState.pageData.formData = lodash.cloneDeep(props.modifyObj);
    });

    const empForm = ref();
    const pageState = reactive({
      pageData: {
        permissions: {
          Add: utils.checkPermission("empinfo_add"),
          Edit: utils.checkPermission("empinfo_edit"),
        },
        sexEnumArr: enums.SexEnum.getObjArray(),
        stateEnumArr: enums.StateEnum.getObjArray(),
        formData: {},
        formRules: {
          forgid: [{ required: true, message: "所属公司为空", trigger: "blur" }],
          fdeptid: [{ required: true, message: "所属部门为空", trigger: "blur" }],
          fcode: [{ required: true, message: "请输入编号", trigger: "blur" }],
          fname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          fsex: [{ required: true, message: "请选择性别", trigger: "blur" }],
          fissysuser: [{ required: true, message: "请选择类型", trigger: "blur" }],
          state: [{ required: true, message: "请选择状态", trigger: "blur" }],
        },
        isAdd: props.isAdd,
      },
    });
    const pageFunc = {
      onHandleBirthday: (date) => {
        pageState.pageData.formData.fbirthday = utils.parseTime(date);
      },
      onHandleJoindate: (date) => {
        pageState.pageData.formData.fjoindate = utils.parseTime(date);
      },
      onHandleDimissiondate: (date) => {
        pageState.pageData.formData.fdimissiondate = utils.parseTime(date);
      },
      onHandleCancel: () => {
        empForm.value?.resetFields();
        context.emit("cancel");
      },
      onHandleSure: () => {
        empForm.value?.validate((valid) => {
          if (valid) {
            const loading = ElLoading.service({
              lock: true,
              background: "rgba(0, 0, 0, 0.7)",
            });
            if (props.isAdd) {
              createEmp(pageState.pageData.formData)
                .then(() => {
                  loading.close();
                  context.emit("ok", {
                    isAdd: props.isAdd,
                    retObj: pageState.pageData.formData,
                  });
                })
                .catch((error) => {
                  loading.close();
                  ElMessage.error(error.message || "请求出错");
                });
            } else {
              updateEmp(pageState.pageData.formData)
                .then(() => {
                  loading.close();
                  context.emit("ok", {
                    isAdd: props.isAdd,
                    retObj: pageState.pageData.formData,
                  });
                })
                .catch((error) => {
                  loading.close();
                  ElMessage.error(error.message || "请求出错");
                });
            }
          } else return false;
        });
      },
    };

    return {
      empForm,
      ...toRefs(pageState),
      ...pageFunc,
    };
  },
};
</script>

<style lang="scss">
.empedit {
  height: 100%;
  background-color: white;
  .empForm {
    width: calc(100% - 6px);
  }
}
</style>
